<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据中心</el-breadcrumb-item>
      <el-breadcrumb-item>客户管理</el-breadcrumb-item>
    </el-breadcrumb>

    <div>
      <el-card class="box-card">
        <div align="center" class="d1" style="color: mediumblue">
          <div style="float: right">
            <el-button type="text" @click="importExcel = true">导入</el-button>
            <el-button type="text" @click="exportExcel">导出</el-button>
          </div>
          <h3>客户管理界面</h3>
        </div>

        <div class="d2">
          <el-form :model="customerForm" class="demo-form-inline">
            <el-row :gutter="20">
              <el-form-item>
                <el-col :span="5">
                  <el-input v-model="customerForm.code" placeholder="请输入编号"></el-input>
                </el-col>
                <el-col :span="5">
                  <el-input v-model="customerForm.name" placeholder="请输入名称"></el-input>
                </el-col>
                <el-col :span="5">
                  <el-input v-model="customerForm.address" placeholder="请输入地址"></el-input>
                </el-col>
                <div style="float: right">
                  <el-button @click="list" plain type="info">搜索</el-button>
                  <el-button @click="add" type="primary">添加用户</el-button>
                </div>
              </el-form-item>
            </el-row>
          </el-form>
        </div>
        <div class="d3">
          <el-table
            :data="customerList"
            stripe
            style="width: 100%">
            <el-table-column
              prop="code"
              label="编号">
            </el-table-column>
            <el-table-column
              prop="name"
              label="名称">
            </el-table-column>
            <el-table-column
              label="税率(%)">
              <template slot-scope="scope">
                {{scope.row.taxRate}}
              </template>
            </el-table-column>
            <el-table-column
              prop="address"
              label="公司地址">
            </el-table-column>
            <el-table-column
              label="首次合作时间">
              <template slot-scope="scope">
                {{scope.row.cooperdate | datefmt}}
              </template>
            </el-table-column>
            <el-table-column
              label="操作">
              <template slot-scope="scope">
                <el-col :span="12">
                  <el-dropdown>
                <span class="el-dropdown-link">
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                    <el-dropdown-menu slot="dropdown">
                      <div>
                        <el-button @click="del(scope.row.id)" plain type="danger">删&nbsp;&nbsp;除</el-button>
                      </div>
                      <div>
                        <el-button @click="detailById(scope.row.id)" plain type="primary">明&nbsp;&nbsp;细</el-button>
                      </div>
                      <div>
                        <el-button @click="updateById(scope.row.id)" plain type="primary">修&nbsp;&nbsp;改</el-button>
                      </div>
                      <div>
                        <el-button @click="toLinkMan(scope.row.id)" plain type="info">联系人</el-button>
                      </div>
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-col>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div align="center">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.pageNum"
            :page-sizes="[2, 5, 7, 11]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </el-card>
    </div>
    <div>
      <el-dialog title="客户明细" :visible.sync="dialogFormVisible">
        <el-form :model="detailForm">
          <el-row :gutter="22">
            <el-col :span="11">
              <el-form-item label="客户编号" :label-width="formLabelWidth">
                <el-input v-model="detailForm.code" autocomplete="off" readonly></el-input>
              </el-form-item>
              <el-form-item label="客户名称" :label-width="formLabelWidth">
                <el-input v-model="detailForm.name" autocomplete="off" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="发票类型" :label-width="formLabelWidth">
                <el-select v-model="detailForm.invoiceType" disabled placeholder="请选择发票类型">
                  <el-option label="普通发票" :value="0"></el-option>
                  <el-option label="特级发票" :value="1"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="税率" :label-width="formLabelWidth">
                <el-input v-model="detailForm.taxRate" autocomplete="off" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="地址" :label-width="formLabelWidth">
                <el-input v-model="detailForm.address" autocomplete="off" readonly></el-input>
              </el-form-item>
              <el-form-item label="所属行业" :label-width="formLabelWidth">
                <el-select v-model="detailForm.industry" disabled placeholder="请选择行业">
                  <el-option label="机械" :value="0"></el-option>
                  <el-option label="电子" :value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="地址" :label-width="formLabelWidth">
                <el-input v-model="detailForm.address" autocomplete="off" readonly></el-input>
              </el-form-item>
              <el-form-item label="首次合作时间" :label-width="formLabelWidth">
                <el-date-picker
                  v-model="detailForm.cooperDate"
                  type="date"
                  :disabled="true"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
        </div>
      </el-dialog>
    </div>

    <el-dialog title="导入Excel信息" width="400px" :visible.sync="importExcel">
      <el-upload
        class="upload-demo"
        drag
        :headers="auth"
        :on-success="uploadExcel"
        action="/api/information/pi-customer/importExcel"
        multiple>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">上传用户Excel数据</div>
      </el-upload>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "Customer",
    data() {
      return {
        customerList: [],
        customerForm: {},
        detailForm: {},
        page: {
          pageSize: 5,
          pageNum: 0
        },
        total: 0,
        formLabelWidth: "120px",
        dialogFormVisible: false,
        importExcel:false,
        auth:{}
      }
    },
    methods: {
      add() {
        this.$router.push("/addcustomer")
      },
      updateById(id) {
        this.$router.push(
          {
            path: '/addcustomer',
            query: {id}
          }
        )
      },
      toLinkMan(id) {
        this.$router.push(
          {
            path: "/linkMan",
            query: {id}
          }
        )
      },
      del(ids) {
        this.$http.delete("/information/pi-customer/del/" + ids).then((res) => {
          if (res.data.success) {
            this.$message.success(res.data.message)
            this.list()
          } else {
            this.$message.error(res.data.message)
          }
        })
      },
      list() {
        this.$http.post("/information/pi-customer/list/" + this.page.pageSize + "/" + this.page.pageNum, this.customerForm).then((res) => {
          if (res.data.success) {
            this.customerList = res.data.result.list
            this.total = res.data.result.total
          } else {
            this.$message.error(res.data.result.message)
          }
        })
      },
      detailById(id) {
        this.$http.get("/information/pi-customer/detailById/" + id).then((res) => {
          if (res.data.success) {
            this.detailForm = res.data.result
            this.dialogFormVisible = true
          } else {
            this.$message.error(res.data.result.message)
          }
        })
      },
      handleSizeChange(val) {
        this.page.pageSize = val
        this.list()
      },
      handleCurrentChange(val) {
        this.page.pageNum = val
        this.list()
      },
      exportExcel() {
        location.href="http://localhost:8080/information/pi-customer/exportExcel"
      },
      uploadExcel(res,file){
          if(res.success){
            this.$message.success(res.message)
            this.importExcel=false
            this.list()
          }
      }
    },
    filters: {

    },
    mounted() {
      this.list()
      this.auth.token=sessionStorage.getItem("token")
    }
  }
</script>

<style scoped lang="less">
  .d1 {
    border-bottom: 1px solid #333744;
  }

  .d2 {
    margin: 20px
  }

  .d3 {
    margin-top: -20px
  }

  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }

  .el-icon-arrow-down {
    font-size: 12px;
  }

  .demonstration {
    display: block;
    color: #8492a6;
    font-size: 14px;
    margin-bottom: 20px;
  }
</style>
